<template>
	<view>
		<view class="head">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
				previous-margin="10px" next-margin="10px" easing-function="easeInOutCubic" duration="2000">
				<swiper-item v-for="(item, i) in swiperList" :key="i" @click="gotoGzh">
					<!-- 通过每个页面id进行跳转  未实现 -->
					<view class="swiper-item">
						<image :src="item.imgSrc"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="bottom">
		</view>

		<view class="content">

			<view class="image-container">
				<view v-for="(image, index) in inforList" :key="index" class="image-item" @click="gotoGzh">
					<image :src="image.imgSrc" style="width: 100%; "></image>
					<text>{{ image.title }}</text>
				</view>
			</view>
		</view>
		<u-overlay :show="toOverlay" mask-click-able="false">
			<u-loading-icon text="正在跳转微信公众号..." textSize="20" :opacity="2"></u-loading-icon>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				inforList: [],
				toOverlay: false
			};
		},
		onLoad() {
			this.getSwiperList()
		},
		methods: {
			async getSwiperList() {
				const {
					data: res
				} = await uni.$u.http.get("/user/information/list", {
					custom: {
						auth: true
					}
				})
				console.log(res);
				this.swiperList = res.data.informationBannerList
				this.inforList = res.data.informationList
			},
			gotoGzh() {
				this.toOverlay = true
				setTimeout(() => {
					uni.navigateTo({
						url: '/subpkg/detailCom/detailCom', // 公众号的页面路径
					});
					this.toOverlay = false
				}, 1200);

			},
		}
	}
</script>

<style lang="scss">
	.head {

		.swiper-item,
		image {
			border-radius: 20px 20px 20px 20px;
			border: 1px solid #ffffff;
			width: 100%;
			height: 100%;
		}
	}

	.image-container {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: space-between;
		margin: 15px;
	}

	.image-item {
		width: 48%;
		margin-bottom: 10px;
	}
</style>